<template>
  <div style="width: 60%;margin-left: 20%; margin-right: 20%;margin-top: 5%;">
    <el-card>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.header"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="标签">
            <el-select v-model="form.locationLabelId" placeholder="请选择活动区域">
                <el-option
                    v-for="item in labelList"
                    :key="item.lableId"
                    :label="item.lableName"
                    :value="item.lableId">
                </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="float: right;" label="地区">
            <el-select  v-model="form.locationId" placeholder="请选择活动区域">
                <el-option
                    v-for="item in locationList"
                    :key="item.locationId"
                    :label="item.locationName"
                    :value="item.locationId">
                </el-option>
            </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="帖子内容">
            <div style="border: 1px solid #ccc;">
                <Toolbar
                    style="border-bottom: 1px solid #ccc"
                    :editor="editor"
                    :defaultConfig="toolbarConfig"
                    :mode="mode"
                />
                <Editor
                    style="height: 500px; overflow-y: hidden;"
                    v-model="form.content"
                    :defaultConfig="editorConfig"
                    :mode="mode"
                    ref="editor"
                    @onCreated="onCreated"
                    @onChanged="onChanged"
                />
            </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即发布</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// import work from "@/api/work";
import label from "@/api/label";
import location from "@/api/location";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from 'axios'
import work from '@/api/work';
// import store from "@/store";

export default {
  components: { Toolbar,Editor },
  data() {
    return {
      form: {},
      labelList: [],
      locationList: [],
      editor: null,
      BASE_URL: process.env.VUE_APP_BASE_API + "/weddingoss/fileoss/uploadFile",
      toolbarConfig: { 
        exexcludeKeys: ["uploadVideo"]
       },
      editorConfig: {
          placeholder: '请输入内容...' ,
          MENU_CONF: {
            uploadImage: {
              customUpload: this.uploadImg,
            },
          },
      },
      mode: 'default', // or 'simple',
    };
  },
  created() {
    this.init()
    console.log(process.env.VUE_APP_BASE_API)
  },
  methods: {
    init() {
      this.getLabelList()
      this.getLocationList()
    },
    getLabelList() {
      label.getAllLable().then((res) => {
        this.labelList = res.data.lableList;
      });
    },
    getLocationList() {
      location.getAllLocation().then((res) => {
        this.locationList = res.data.locationList;
      });
    },
    onSubmit() {
        this.form.userId = this.$store.state.user.userId
        if ( this.$store.state.user.isCamera === 1 ) {
            this.form.cameramanId = this.$store.state.user.userId
        }
        if ( this.notNull(this.form.header) 
        && this.notNull(this.form.content) 
        && this.notNull(this.form.locationLabelId)
        && this.notNull(this.form.locationId)) {
            work.addWork(this.form).then( res => {
                if ( res.success ) {
                    this.$message({
                        message: '发布成功, 等待审核',
                        type: 'success'
                    })
                }
                this.$router.push({path: '/'})
            })
        } else {
            this.$message({
                message: '请填写完整',
                type: 'info'
            })
        }
    },
    notNull(s) {
        if ( s !== '' && s !== undefined ) {
            return true
        }
        return false
    },
    onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      },
    onChanged() {
    },
    uploadImg(file, insertFn){
      let imgData = new FormData();
			imgData.append('file', file);
      axios({
        url: this.BASE_URL,
        method: 'post',
        data: imgData,
      }).then((res) => {
       insertFn(res.data.data.url);
      });
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
  },
};
</script>

<style scope src="@wangeditor/editor/dist/css/style.css">
.work {
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 5%;
}
</style>